import { Metadata } from 'next';
import Link from 'next/link';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import {
  ArrowLeft,
  Shield,
  Clock,
  Zap,
  Brain,
  DollarSign,
  BarChart3,
  CheckCircle,
  Users,
  AlertTriangle,
  TrendingUp,
  Target,
  Eye,
  Database,
  Network,
  Cpu,
  Activity,
  FileText,
  Settings,
} from 'lucide-react';

export const metadata: Metadata = {
  title: '证券公司智能风控系统案例 | CActor框架',
  description:
    '了解CActor框架如何帮助证券公司构建AI驱动的实时风控系统，风险识别准确率达95%+。',
};

/**
 * 项目关键指标数据
 */
const keyMetrics = [
  {
    icon: Eye,
    label: '风险识别准确率',
    before: '75%',
    after: '95%+',
    improvement: '27%',
    color: 'text-purple-600',
  },
  {
    icon: Zap,
    label: '处理速度',
    before: '5秒',
    after: '1.5秒',
    improvement: '200%',
    color: 'text-blue-600',
  },
  {
    icon: AlertTriangle,
    label: '误报率',
    before: '25%',
    after: '10%',
    improvement: '60%',
    color: 'text-green-600',
  },
  {
    icon: Brain,
    label: 'AI模型更新',
    before: '月度',
    after: '实时',
    improvement: '100%',
    color: 'text-orange-600',
  },
];

/**
 * 风控场景覆盖
 */
const riskScenarios = [
  {
    name: '交易风控',
    description: '实时监控异常交易行为，防范市场操纵',
    coverage: '100%',
    icon: BarChart3,
    risks: ['异常交易', '市场操纵', '内幕交易', '洗钱行为'],
  },
  {
    name: '信用风控',
    description: '评估客户信用风险，动态调整授信额度',
    coverage: '95%',
    icon: Users,
    risks: ['信用违约', '资金链断裂', '财务造假', '关联风险'],
  },
  {
    name: '市场风控',
    description: '监控市场风险暴露，及时预警风险集中',
    coverage: '98%',
    icon: TrendingUp,
    risks: ['市场波动', '流动性风险', '集中度风险', '系统性风险'],
  },
  {
    name: '操作风控',
    description: '识别操作风险事件，防范人为错误',
    coverage: '90%',
    icon: Settings,
    risks: ['操作失误', '系统故障', '欺诈行为', '合规违规'],
  },
];

/**
 * AI算法模型
 */
const aiModels = [
  {
    name: '异常检测模型',
    description: '基于机器学习的异常行为识别',
    algorithm: 'Isolation Forest + LSTM',
    accuracy: '96%',
    features: ['无监督学习', '时序分析', '异常评分', '实时更新'],
  },
  {
    name: '信用评估模型',
    description: '多维度客户信用风险评估',
    algorithm: 'XGBoost + Neural Network',
    accuracy: '94%',
    features: ['多维特征', '集成学习', '概率输出', '可解释性'],
  },
  {
    name: '市场预测模型',
    description: '市场趋势和风险预测分析',
    algorithm: 'Transformer + CNN',
    accuracy: '92%',
    features: ['深度学习', '多模态融合', '趋势预测', '风险量化'],
  },
  {
    name: '关联分析模型',
    description: '复杂关联关系挖掘和风险传导',
    algorithm: 'Graph Neural Network',
    accuracy: '89%',
    features: ['图神经网络', '关系挖掘', '风险传导', '网络分析'],
  },
];

/**
 * 系统架构组件
 */
const systemComponents = [
  {
    name: '数据采集层',
    description: '实时采集交易、行情、客户等多源数据',
    components: ['数据接口', '消息队列', '数据清洗', '格式转换'],
    icon: Database,
  },
  {
    name: '计算引擎层',
    description: '基于CActor的高性能风控计算引擎',
    components: ['规则引擎', 'AI推理', '实时计算', '批量处理'],
    icon: Cpu,
  },
  {
    name: '模型服务层',
    description: 'AI模型训练、部署和在线推理服务',
    components: ['模型训练', '模型部署', '在线推理', '模型监控'],
    icon: Brain,
  },
  {
    name: '应用服务层',
    description: '风控业务逻辑和决策执行',
    components: ['风险评估', '决策引擎', '预警通知', '报告生成'],
    icon: Shield,
  },
];

/**
 * 项目实施时间线
 */
const projectTimeline = [
  {
    phase: '需求分析',
    duration: '3周',
    status: 'completed',
    description: '深入调研风控业务需求，设计系统架构',
    deliverables: ['需求规格书', '系统架构设计', '技术选型报告'],
  },
  {
    phase: '数据准备',
    duration: '4周',
    status: 'completed',
    description: '历史数据整理，特征工程，数据质量提升',
    deliverables: ['数据仓库建设', '特征工程', '数据质量报告'],
  },
  {
    phase: '模型开发',
    duration: '8周',
    status: 'completed',
    description: 'AI模型开发训练，算法优化调参',
    deliverables: ['AI模型库', '算法优化', '模型评估报告'],
  },
  {
    phase: '系统开发',
    duration: '10周',
    status: 'completed',
    description: '风控系统开发，规则引擎，决策引擎',
    deliverables: ['风控系统', '规则引擎', '决策引擎'],
  },
  {
    phase: '集成测试',
    duration: '4周',
    status: 'completed',
    description: '系统集成测试，性能测试，压力测试',
    deliverables: ['集成测试报告', '性能测试报告', '压力测试报告'],
  },
  {
    phase: '上线运维',
    duration: '持续',
    status: 'ongoing',
    description: '生产环境部署，持续监控优化',
    deliverables: ['生产部署', '监控体系', '运维手册'],
  },
];

export default function RiskControlCasePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-purple-50">
      {/* 导航 */}
      <div className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <Link
            href="/cases"
            className="inline-flex items-center text-purple-600 hover:text-purple-700"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回案例列表
          </Link>
        </div>
      </div>

      {/* Hero Section */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 text-sm font-medium mb-6">
                <Shield className="w-4 h-4 mr-2" />
                证券业 · 智能风控
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                证券公司
                <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                  智能风控系统
                </span>
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                某头部证券公司采用CActor框架构建AI驱动的实时风控系统，集成多种机器学习算法，
                风险识别准确率达95%+，处理速度提升200%，误报率降低60%。
              </p>
              <div className="flex flex-wrap gap-3">
                <Badge className="bg-purple-100 text-purple-700 hover:bg-purple-200">
                  <CheckCircle className="w-3 h-3 mr-1" />
                  项目成功
                </Badge>
                <Badge variant="outline">29周交付</Badge>
                <Badge variant="outline">95%+准确率</Badge>
                <Badge variant="outline">AI实时更新</Badge>
              </div>
            </div>

            <div className="relative">
              <div className="bg-white rounded-2xl shadow-2xl p-8">
                <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
                  风控核心指标
                </h3>
                <div className="space-y-6">
                  {keyMetrics.map((metric, index) => {
                    const Icon = metric.icon;
                    return (
                      <div
                        key={index}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center">
                          <div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                            <Icon className={`w-5 h-5 ${metric.color}`} />
                          </div>
                          <div>
                            <div className="font-semibold text-gray-900">
                              {metric.label}
                            </div>
                            <div className="text-sm text-gray-500">
                              {metric.before} → {metric.after}
                            </div>
                          </div>
                        </div>
                        <div className={`text-2xl font-bold ${metric.color}`}>
                          ↑{metric.improvement}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 风控场景覆盖 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              全方位风险监控场景
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              系统覆盖交易风控、信用风控、市场风控、操作风控等多个维度，
              为证券业务提供全方位的风险防护。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {riskScenarios.map((scenario, index) => {
              const Icon = scenario.icon;
              return (
                <Card
                  key={index}
                  className="hover:shadow-lg transition-all duration-300 group"
                >
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-4 group-hover:scale-110 transition-transform">
                          <Icon className="w-6 h-6 text-white" />
                        </div>
                        <div>
                          <CardTitle className="text-xl">
                            {scenario.name}
                          </CardTitle>
                          <CardDescription className="text-sm">
                            {scenario.description}
                          </CardDescription>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="text-2xl font-bold text-purple-600">
                          {scenario.coverage}
                        </div>
                        <div className="text-xs text-gray-500">覆盖率</div>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <h4 className="font-semibold text-gray-900">
                        主要风险类型：
                      </h4>
                      <div className="grid grid-cols-2 gap-2">
                        {scenario.risks.map((risk, riskIndex) => (
                          <div
                            key={riskIndex}
                            className="flex items-center text-sm"
                          >
                            <AlertTriangle className="w-3 h-3 text-orange-500 mr-2" />
                            <span className="text-gray-600">{risk}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* AI算法模型 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              AI智能算法模型
            </h2>
            <p className="text-lg text-gray-600">
              集成多种先进的机器学习和深度学习算法，实现精准的风险识别和预测。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {aiModels.map((model, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-xl">{model.name}</CardTitle>
                    <Badge className="bg-purple-100 text-purple-700">
                      准确率 {model.accuracy}
                    </Badge>
                  </div>
                  <CardDescription>{model.description}</CardDescription>
                  <div className="text-sm text-gray-500 font-mono bg-gray-50 px-3 py-1 rounded">
                    {model.algorithm}
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <h4 className="font-semibold text-gray-900">核心特性：</h4>
                    <div className="grid grid-cols-2 gap-2">
                      {model.features.map((feature, featureIndex) => (
                        <div
                          key={featureIndex}
                          className="flex items-center text-sm"
                        >
                          <Brain className="w-3 h-3 text-purple-500 mr-2" />
                          <span className="text-gray-600">{feature}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 系统架构 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              智能风控系统架构
            </h2>
            <p className="text-lg text-gray-600">
              基于CActor框架的四层架构设计，实现高性能、高可用的实时风控处理。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {systemComponents.map((component, index) => {
              const Icon = component.icon;
              return (
                <Card key={index} className="hover:shadow-lg transition-shadow">
                  <CardHeader>
                    <div className="flex items-center">
                      <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-4">
                        <Icon className="w-6 h-6 text-white" />
                      </div>
                      <div>
                        <CardTitle className="text-xl">
                          {component.name}
                        </CardTitle>
                        <CardDescription>
                          {component.description}
                        </CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-2">
                      {component.components.map((item, itemIndex) => (
                        <div
                          key={itemIndex}
                          className="flex items-center p-2 bg-gray-50 rounded text-sm"
                        >
                          <div className="w-2 h-2 rounded-full bg-purple-500 mr-2" />
                          {item}
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>

          {/* 架构优势 */}
          <div className="mt-12 bg-gradient-to-r from-purple-50 to-pink-50 rounded-2xl p-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
              架构核心优势
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                {
                  title: '实时处理',
                  description: '毫秒级风险识别和决策，确保及时响应市场变化',
                  icon: '⚡',
                },
                {
                  title: 'AI驱动',
                  description: '集成多种AI算法，持续学习优化，提升识别准确率',
                  icon: '🧠',
                },
                {
                  title: '弹性扩展',
                  description: '基于Actor模型的分布式架构，支持水平扩展',
                  icon: '🚀',
                },
              ].map((advantage, index) => (
                <div key={index} className="text-center">
                  <div className="text-4xl mb-3">{advantage.icon}</div>
                  <h4 className="font-semibold text-gray-900 mb-2">
                    {advantage.title}
                  </h4>
                  <p className="text-sm text-gray-600">
                    {advantage.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 实施过程 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              项目实施过程
            </h2>
            <p className="text-lg text-gray-600">
              项目历时29周，采用敏捷开发和DevOps实践，确保高质量交付。
            </p>
          </div>

          <div className="space-y-8">
            {projectTimeline.map((phase, index) => (
              <div key={index} className="flex items-start">
                <div className="flex-shrink-0 mr-6">
                  <div
                    className={`w-12 h-12 rounded-full flex items-center justify-center ${
                      phase.status === 'completed'
                        ? 'bg-purple-100'
                        : phase.status === 'ongoing'
                          ? 'bg-blue-100'
                          : 'bg-gray-100'
                    }`}
                  >
                    {phase.status === 'completed' ? (
                      <CheckCircle className="w-6 h-6 text-purple-600" />
                    ) : phase.status === 'ongoing' ? (
                      <Activity className="w-6 h-6 text-blue-600" />
                    ) : (
                      <div className="w-6 h-6 rounded-full bg-gray-400" />
                    )}
                  </div>
                  {index < projectTimeline.length - 1 && (
                    <div className="w-0.5 h-16 bg-gray-200 ml-6 mt-2" />
                  )}
                </div>

                <div className="flex-1">
                  <Card className="hover:shadow-md transition-shadow">
                    <CardHeader>
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-xl">{phase.phase}</CardTitle>
                        <Badge variant="outline">{phase.duration}</Badge>
                      </div>
                      <CardDescription>{phase.description}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <h4 className="font-semibold text-gray-900">
                          主要交付物：
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                          {phase.deliverables.map(
                            (deliverable, deliverableIndex) => (
                              <div
                                key={deliverableIndex}
                                className="flex items-center text-sm"
                              >
                                <FileText className="w-3 h-3 text-purple-500 mr-2" />
                                <span className="text-gray-600">
                                  {deliverable}
                                </span>
                              </div>
                            )
                          )}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 效果展示 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              风控效率和准确性提升
            </h2>
            <p className="text-lg text-gray-600">
              系统上线后显著提升了风险识别能力和处理效率，为公司风险管理带来革命性改进。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* 性能对比 */}
            <Card className="p-6">
              <h3 className="text-2xl font-bold text-gray-900 mb-6">
                性能提升对比
              </h3>
              <div className="space-y-6">
                {keyMetrics.map((metric, index) => {
                  const Icon = metric.icon;
                  return (
                    <div key={index}>
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center">
                          <Icon className={`w-5 h-5 ${metric.color} mr-2`} />
                          <span className="font-medium">{metric.label}</span>
                        </div>
                        <span className={`font-bold ${metric.color}`}>
                          +{metric.improvement}
                        </span>
                      </div>
                      <div className="flex items-center text-sm text-gray-600 mb-2">
                        <span>优化前: {metric.before}</span>
                        <ArrowLeft className="w-4 h-4 mx-2 rotate-180" />
                        <span>优化后: {metric.after}</span>
                      </div>
                      <Progress
                        value={parseInt(metric.improvement)}
                        className="h-2"
                      />
                    </div>
                  );
                })}
              </div>
            </Card>

            {/* 业务价值 */}
            <Card className="p-6">
              <h3 className="text-2xl font-bold text-gray-900 mb-6">
                业务价值体现
              </h3>
              <div className="space-y-4">
                {[
                  {
                    title: '风险损失减少',
                    value: '70%',
                    description: '通过精准风控，显著降低各类风险损失',
                    icon: Shield,
                    color: 'text-green-600',
                  },
                  {
                    title: '合规成本降低',
                    value: '45%',
                    description: '自动化合规检查，降低人工成本',
                    icon: FileText,
                    color: 'text-blue-600',
                  },
                  {
                    title: '处理效率提升',
                    value: '200%',
                    description: '风险事件处理效率大幅提升',
                    icon: Zap,
                    color: 'text-purple-600',
                  },
                  {
                    title: 'ROI投资回报',
                    value: '350%',
                    description: '项目投资回报率，10个月收回成本',
                    icon: TrendingUp,
                    color: 'text-orange-600',
                  },
                ].map((value, index) => {
                  const Icon = value.icon;
                  return (
                    <div
                      key={index}
                      className="flex items-center p-4 bg-gray-50 rounded-lg"
                    >
                      <div className="w-10 h-10 rounded-lg bg-white flex items-center justify-center mr-4">
                        <Icon className={`w-5 h-5 ${value.color}`} />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center justify-between mb-1">
                          <span className="font-semibold text-gray-900">
                            {value.title}
                          </span>
                          <span className={`text-2xl font-bold ${value.color}`}>
                            {value.value}
                          </span>
                        </div>
                        <p className="text-sm text-gray-600">
                          {value.description}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </Card>
          </div>
        </div>
      </section>

      {/* 客户证言 */}
      <section className="py-16 px-4 bg-gradient-to-r from-purple-600 to-pink-600">
        <div className="max-w-4xl mx-auto text-center text-white">
          <div className="text-6xl mb-6">&ldquo;</div>
          <blockquote className="text-2xl md:text-3xl font-light mb-8 leading-relaxed">
            &ldquo;CActor框架帮助我们构建了业界领先的智能风控系统。AI算法的准确率达到95%+，
            处理速度提升了200%，误报率降低了60%。更重要的是，系统的实时学习能力
            让我们能够快速应对新的风险挑战，为公司的稳健发展提供了强有力保障。&rdquo;
          </blockquote>
          <div className="flex items-center justify-center">
            <div className="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mr-4">
              <Users className="w-8 h-8" />
            </div>
            <div className="text-left">
              <div className="font-semibold text-lg">王总监</div>
              <div className="opacity-90">风控总监 · 某头部证券公司</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
            准备构建您的智能风控系统？
          </h2>
          <p className="text-xl text-gray-600 mb-8">
            联系我们的专家团队，了解CActor框架如何为您的风控业务带来AI驱动的智能化升级。
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-purple-600 hover:bg-purple-700">
              联系风控专家
            </Button>
            <Button size="lg" variant="outline">
              下载AI风控白皮书
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
